import React from 'react'
import {Menu,Button,Dropdown,Input,Row,Col,DatePicker } from 'antd';
import { DownOutlined, UserOutlined } from '@ant-design/icons';
import axios from 'axios'
import './css/ProductsList.css'
import { Table } from 'antd';
import {Link,withRouter} from 'react-router-dom'
import locale from 'antd/lib/date-picker/locale/zh_CN'

const {Search} = Input
const { RangePicker } = DatePicker;

const menu = (
    <Menu>
        <Menu.Item key="1">
            <UserOutlined />
            1st menu item
        </Menu.Item>
        <Menu.Item key="2">
            <UserOutlined />
            2nd menu item
        </Menu.Item>
        <Menu.Item key="3">
            <UserOutlined />
            3rd item
        </Menu.Item>
    </Menu>
);

const pageNation = {
    position:['bottomRight'],
    pageSize:10,
    size:'small',
    total:7,
    showQuickJumper:true,
    backgroundColor:'#4BD0B6',
}

class ProductsList extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            selectedRowKeys: [],
            loading: false,
            data:[
                {
                    key: '001',
                    inDate: '2020-04-15 15:15:23',
                    depot: '成都仓',
                    type:'日用品',
                    createBy:'张经理',
                },
                {
                    key: '002',
                    inDate: '2020-04-15 15:15:23',
                    depot: '成都仓',
                    type:'日用品',
                    createBy:'张经理',
                },
                {
                    key: '003',
                    inDate: '2020-04-15 15:15:23',
                    depot: '成都仓',
                    type:'日用品',
                    createBy:'张经理',
                },
                {
                    key: '004',
                    inDate: '2020-04-15 15:15:23',
                    depot: '成都仓',
                    type:'日用品',
                    createBy:'张经理',
                },
                {
                    key: '005',
                    inDate: '2020-04-15 15:15:23',
                    depot: '成都仓',
                    type:'日用品',
                    createBy:'张经理',
                },
            ]
        }
        this.menu2 = (
            <Menu>
                <Menu.Item key="1">
                    <Link to={{pathname:'ImportProDetails',state:'1'}}>
                        <UserOutlined/>
                        导入商品基础信息
                    </Link>
                </Menu.Item>
                <Menu.Item key="2">
                    <Link to={{pathname:'ImportProDetails',state:'2'}}>
                        <UserOutlined />
                        导入商品订货价
                    </Link>
                </Menu.Item>
                <Menu.Item key="3">
                    <Link to={{pathname:'ImportProDetails',state:'3'}}>
                        <UserOutlined />
                        导入商品客户定价
                    </Link>
                </Menu.Item>
                <Menu.Item key="4">
                    <Link to={{pathname:'ImportProDetails',state:'4'}}>
                        <UserOutlined />
                        导入商品图片
                    </Link>
                </Menu.Item>
            </Menu>
        );
    }

    toDetalis(text){
        let data = this.state.data
        data.map(item=>{
            if(item.key===text||item.name===text){
                this.props.history.push({pathname:'/homepage/productsdetails',query:item})
                return item
            }
        })
    }
    toAddToDepot(){
        this.props.history.push('/homepage/addprochuku')
    }
    columns = [
        {
            title: '单号',
            dataIndex: 'key',
            align:'center',
        },
        {
            title: '出库日期',
            dataIndex: 'inDate',
            align:'center',
        },
        {
            title: '所属仓库',
            dataIndex: 'depot',
            align:'center',
        },
        {
            title: '类型',
            dataIndex: 'type',
            align:'center'
        },
        {
            title: '制单人',
            dataIndex: 'createBy',
            align:'center'
        },
    ];

    onSelectChange = selectedRowKeys => {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        this.setState({ selectedRowKeys });
    };
    render() {
        let data = this.state.data;
        let columns = this.columns;
        const { loading, selectedRowKeys } = this.state;
        const rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange,
        };
        const hasSelected = selectedRowKeys.length > 0;
        return (
            <div id='headContent'>
                <Row id='orderListHead'>
                    <Col id='leftCol' span={12}>
                        <Dropdown overlay={menu}>
                            <Button>
                                全部仓库 <DownOutlined />
                            </Button>
                        </Dropdown>
                        <Dropdown overlay={menu}>
                            <Button id='mySelect'>
                                全部类型 <DownOutlined />
                            </Button>
                        </Dropdown>
                        <RangePicker locale={locale} size='default'/>
                        <Search style={{marginLeft:'15px'}} id='myInput'  placeholder="请输入..." />
                    </Col>
                    <Col id='rightCol' span={12}>
                        <Button id='myBtn' type="primary" onClick={this.toAddToDepot.bind(this)}>新增</Button>
                    </Col>
                </Row>
                <Row>
                    <Table id='myTable' pagination={pageNation} rowSelection={rowSelection} columns={columns} dataSource={data} />
                </Row>
            </div>
        );
    }
    // componentDidMount() {
    //     axios({
    //         url:'http://123.57.67.148:3000/mock/177/getOrder',
    //         method:'get'
    //     }).then(res=>{
    //         let data = res.data.order.filter((item)=>{
    //             item.key = item.id
    //             delete item.id
    //             return item
    //         })
    //         this.setState({
    //             data:data
    //         })
    //     })
    // }
}

export default withRouter(ProductsList)